<template>
    <div>
        <h1 style="text-align: center;">毕业生统计图表</h1>
        <div>
            <div id="charts"></div>
        </div>
    </div>
</template>

<script>
import { tableData } from '@/request'
import * as echarts from "echarts";
export default {
    mounted() {
        this.GetTableData()
    },
    data () {
        return {
            chartsData:[]
        }
    },
    methods: {
        async GetTableData() {
            let data = await tableData()
            this.chartsData = data.data.data
            // console.log(this.chartsData);  
            this.createCharts() 
        },
        createCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('charts'));
            console.log(111);

            // 配置option
            let option = {

                xAxis: [
                        {
                            type: "category",
                            boundaryGap: false,
                            data:this.chartsData.map(item => {
                                // console.log(item);
                                return item.year + '年'
                            })
                        }
                    ]
                ,
                yAxis: [
                        {
                            value:'value',
                            name:'个'
                        }
                    ]
                ,
                series: [
                    {
                        type: 'bar',
                        name: "人数",
                        data: this.chartsData.map(item => item.number)
                    }
                ]

                // series: [
                //     {
                //         name: "毕业年份和人数",
                //         type: "pie",
                //         data: [
                //             ...this.chartsData.map(item => {
                //                 return {
                //                     value: item.number,
                //                     name: item.year + '年'
                //                 }
                //             })
                //         ]
                //     }
                // ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    
}
</script>

<style lang="scss" scoped>
    #charts{
        width: 600px;
        height: 500px;
        background-color: white;
        margin-left: 300px;
    }
</style>
